<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form label-colon ref="checkForm" :model="entity" :rules="ruleValidate" :label-width="100">
            <form-item prop="parkName" label="选择停车场">
                 <span @click="selectPark()">
                     <i-input readonly  v-model="entity.name" placeholder="请选择停车场"></i-input>
                 </span>
             </form-item>
            <form-item label="区域名称" prop="area">
                <i-input placeholder="请输入区域" v-model="entity.area"></i-input>
            </form-item>
<!--            <form-item label="区域位数" prop="place">-->
<!--                <i-input placeholder="请输入区域位数" v-model="entity.place"></i-input>-->
<!--            </form-item>-->
            <form-item label="区域行数" prop="rowNum">
                <i-input maxlength="10" v-model="entity.rowNum"  placeholder="请输入行数"></i-input>
            </form-item>
            <form-item label="区域列数" prop="columnNum">
                <i-input placeholder="请输入列数" v-model="entity.columnNum"></i-input>
            </form-item>
            <form-item label="行间距" prop="rowSpace">
                <i-input placeholder="请输入行距" v-model="entity.rowSpace"></i-input>
            </form-item>
            <form-item label="列间距" prop="columnSpace">
                <i-input placeholder="请输入列距" v-model="entity.columnSpace"></i-input>
            </form-item>
            <form-item label="靠入口位点" prop="spaceNearEntrance">
                <i-input placeholder="请输入行距" v-model="entity.spaceNearEntrance"></i-input>
            </form-item>
            <form-item label="靠入口距离" prop="spaceFarEntrance">
                <i-input placeholder="请输入行距" v-model="entity.spaceFarEntrance"></i-input>
            </form-item>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
    var vm = new Vue({
        el: '#app',
        data: {
            entity: {
                area: null,
                place: null,
                rowNum: null,
                columnNum: null,
                rowSpace: null,
                columnSpace: null,
                spaceNearEntrance: null,
                SpaceFarEntrance: null
            },
            ruleValidate: {
                area: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                rowNum: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                columnNum: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                rowSpace: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                columnSpace: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                spaceNearEntrance: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                spaceFarEntrance: [
                    {required: true, message: "不能为空", trigger: 'blur'}
                ],
                // parkName: [
                //     { required: true, message: '请选择机构', trigger: 'change' }
                // ]
            },
            // parkList:[],
            okUtils:null,
            okLayer:null
        },
        methods: {
                load: function () {
                    layui.use(["okUtils", "okLayer"], function () {
                        vm.okUtils = layui.okUtils;
                        vm.okLayer = layui.okLayer;
                        if (vm.entity.id != undefined) {
                            vm.okUtils.ajaxCloud({
                                url: "/app/parkArea/get",
                                param: {id: vm.entity.id},
                                close: false,
                                success: function (result) {
                                    vm.entity = result.msg;
                                }
                            });
                        }
                    });
                },
                acceptClick: function (dialog) {
                    vm.$refs.checkForm.validate(function (valid) {
                        if (valid) {
                            vm.okUtils.ajaxCloud({
                                url: "/app/parkArea/save",
                                param: vm.entity,
                                json: true,
                                success: function (result) {
                                    vm.okLayer.msg.greenTick(result.msg)
                                    dialog.load();
                                }
                            });
                        }
                    });
                },
                selectPark: function () {
                    vm.okUtils.dialogOpen({
                        title: '选择停车场',
                        id:'org',
                        url: "app/park/select.html",
                        scroll : true,
                        width: '300px',
                        height: '500px',
                        success : function(dialog) {
                            dialog.entity = vm.entity;
                        },
                        yes : function(dialog) {
                            dialog.vm.acceptClick(vm);

                        }
                    });
                }
            },
            created: function () {
                // this.listParkManage();
            }
        });
</script>
</body>
</html>
